<template>
	<view>
		<view class="box1">
			<text class="foodName">{{ obj.food.name }}</text>
			<image v-if="qrcode" :src="qrcode" class="qrcode"></image>
		</view>
		
		<view class="box2">
			<view v-for="(item, index) in obj.shop" :key="index" class="box2-in">
				<image :src="$myRequire(item.imagePath)"></iamge>
				
				<view class="box2-right">
					<view class="shopName">{{ item.name}}</view>
					
					<view class="moneyAndCount">
						<view class="money">{{ '￥' + item.prePrice }}</view>
						<view><text class="count">{{ findBuy(item.id) }}</text>份</view>
					</view>
					
				</view>
			</view> 
		</view>
		
		<view class="floor">
			{{ obj.createTime }}
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	
	export default {
		data(){
			return {
				orgQRCode: '',
				sysOrder: [],
				obj: {
					food: {
						name: ''
					}
				}
			}
		},
		computed: {
			...mapState('user', ['id']),
			...mapState('car', ['shopCar']),
			qrcode() {
				return 'data:image/png;base64,' + this.orgQRCode
			}
		},
		methods: {
			findBuy(shopId) {
				let buy = 0;
				let i;

				for (i = 0; i < this.sysOrder.length; i++) {
					if (this.sysOrder[i].shopId == shopId) {
						buy = this.sysOrder[i].buy
						break
					}
				}
				return buy;
			}
		},
		onLoad(o) {
			this.$myRequest({
				url: '/qrcode/' + o.orderId,
			}).then(res => {
				this.orgQRCode = res.data.result.qrCode
				this.sysOrder = res.data.result.obj.sysOrder
				this.obj = res.data.result.obj
			})
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
	
	.box1{
		margin-top: 100rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 18px;
		color: #535353;
	}
	
	.box1 text{
		font-size: 24px;
		font-weight: 600;
	}
	
	.qrcode{
		width: 400rpx;
		height: 400rpx;
	}
	
	.box2{
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
	}
	
	.box2 image{
		width: 110rpx;
		height: 110rpx;
	}
	
	.shopName{
		font-size: 17px;
		font-weight: 500;
	}
	
	.money{
		color: #ff3703;
		font-size: 15px;
		font-weight: 600;
	}
	
	.count{
		font-weight: 600;
	}
	
	.moneyAndCount{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.box2-in{
		display: flex;
		margin-top: 20rpx;
		border-bottom: 2px solid #f0f0f0;
	}
	
	.box2-in:last-child{
		border-bottom: none;
	}
	
	.box2-right{
		width: 550rpx;
		overflow: hidden;
		margin-left: 20rpx;
	}
	
	.floor{
		text-align: right;
		padding-right: 60rpx;
		color: #535353;
	}
</style>
